<!-- 
  @name: 加注详情
  @date: 2020.3.13
 -->
<template>
	<view class="content">
		<!-- 顶部统计区域 -->
		<view class="total">
			<view class="top">
				<image class="img" :src="info.userPhoto"></image>
				<text class="name">{{info.userName}}</text>
				<text class="phone">{{info.userPhone}}</text>
			</view>
			<view class="num">{{info.moneyPay}}<text class="t1">元</text></view>
		</view>
		
		<!-- 其他 -->
		<view class="info t1">
			<text class="left">加注单号</text><text class="num">{{info.recordCode}}</text>
		</view>
		<view class="info">
			<text class="left">加注量(kg)</text><text class="num">{{info.actualNum}}</text>
		</view>
		<view class="info">
			<text class="left">支付方式</text>
			<text v-if="info.payType === 'payonline'">微信支付</text>
			<text v-else-if="info.payType === 'payfree'">免单支付</text>
			<text v-else-if="info.payType === 'paycard'">加注卡支付</text>
			<text v-else-if="info.payType === 'paybalance'">账户余额支付</text>
			<text v-else-if="info.payType === 'teambalance'">团队余额支付</text>
			<text v-else>其他支付</text>
		</view>
		<view class="info t1" v-if="!isMacrec">
			<text class="left">加注站</text><text class="num">{{info.siteName}}</text>
		</view>
		<view class="info" :class="isMacrec ? 't1' : ''">
			<text class="left">加注时间</text><text class="num">{{info.fillTime}}</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordId: '',  //交易id
				info: {},  //信息
				isMacrec: false,  //是否为加注机记录
			}
		},
		onLoad(e) {
			this.isMacrec = e.isMacrec ? true : false;
			this.recordId = e.recordId;
			this.getInfo();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.getInfo();
				this.$store.commit('hasLogin');
			}
		},
		methods: {
			//获取信息
			getInfo() {
				let api = this.isMacrec ? 'getfillrecorddetail' : 'getrecorddetail';
				this.$http({
					url: this.$api.recordUrl + api,
					data: {
						recordId: this.recordId
					}
				}).then(res => {
					this.info = res;
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部统计区域 */
	.total {
		width: 750rpx;
		height: 256rpx;
		background-color: $color-white;
		.top {
			width: 100%;
			margin-top: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.img {
				width: 60rpx;
				height: 60rpx;
				border-radius: $border-radius-circle;
			}
			.name {
				margin-left: 20rpx;
			}
			.phone {
				margin-left: 18rpx;
				font-family: $font-family-num;
			}
		}
		.num {
			width: 100%;
			text-align: center;
			margin-top: 50rpx;
			font-size: 60rpx;
			font-family: $font-family-num;
			.t1 {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	
	/* 其他 */
	.info.t1 {
		margin-top: $spacing-col;
	}
	.info {
		width: 750rpx;
		height: 86rpx;
		padding: 0 30rpx;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			flex: 1;
			color: $color-grey;
		}
		.num {
			font-family: $font-family-num;
		}
	}
</style>
